<template>
  <div class="main">
    <div class="search">
      <el-autocomplete
          v-model="value"
          style="width:100%"
          clearable
          size="large"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          @select="handleSearch"
          placeholder="请输入企业名称或社会统一信用代码"
      >
          <span slot="append" @click="handleSearch">查询</span>
      </el-autocomplete>
    </div>
    <div class="history">
        <svg t="1644214534503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1290" width="16" height="16"><path d="M320.997969 1024c-68.253867-142.011562-31.903003-223.385019 20.543358-300.022624 57.438205-83.965376 72.253742-167.066779 72.253742-167.066779s45.150589 58.686166 27.103153 150.491297c79.773507-88.797225 94.813037-230.264804 82.781413-284.439111 180.314365 126.012062 257.367957 398.835536 153.531202 601.037218 552.366739-312.534233 137.403706-780.135621 65.149964-832.837974 24.095247 52.670354 28.639105 141.851567-19.999375 185.114215-82.333427-312.278241-285.975063-376.276241-285.975063-376.276241 24.095247 161.050967-87.293272 337.141464-194.681916 468.721352-3.775882-64.221993-7.775757-108.540608-41.534702-169.978688-7.583763 116.668354-96.732977 211.737383-120.860223 328.62973-32.702978 158.267054 24.479235 274.167432 241.752445 396.595606z" fill="#d81e06" p-id="1291"></path></svg>
        <span class="title">热搜企业></span>
        <el-row>
            <el-col :span="8" v-for="item,index in company" :key="index">
                <p class="company" @click="handleClick(item)"><span class="number" :class="[{'num1':index == 0},{'num2':index == 1},{'num3':index == 2}]">{{index+1}}</span><span>{{item.name}}</span></p>
            </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
import {getCbInfo,getHistory,qyxxLikeQuery} from '@/api/portay'
export default {
    data() {
        return {
            value:'',
            company:[],
            restaurants: [],
            timeout:  null
        }
    },
    created() {
        this.init();
    },
    methods: {
        querySearchAsync(queryString, cb) {
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                if(queryString){
                    qyxxLikeQuery({field:queryString.trim()}).then(res=>{
                        this.restaurants = res.data.map(item=>{
                            return {value:item.qymc+'（'+item.shtyxydm+'）',shtyxydm:item.shtyxydm,qymc:item.qymc}
                        });
                        cb(this.restaurants);
                    })
                }
            }, 3000 * Math.random());
        },
        //查询历史列表
        init(){
            getHistory().then(res=>{
                if(res.status){
                    this.company = res.data.map(item=>{
                        return {name:item}
                    })
                }
            })
        },
        //点击查询
        handleSearch(item){
            let feilds;
            if(item.qymc){
              this.value = item.qymc;
              feilds = item.shtyxydm;
            }else{
              feilds = this.value.trim();
              if(!feilds)return
            }
            getCbInfo({feilds}).then(res=>{
                if(res.status){
                    let comInfo = res.data;
                    sessionStorage.setItem('comInfo',JSON.stringify(comInfo))
                    this.$router.push({ path: '/portray1/companyMessage'});
                }else if(res.code != '401' && !(res.status)){
                    this.$message({
                        message: `${res.msg}`,
                        type: 'warning'
                    });
                }
            })
        },
        //点击历史项
        handleClick(item){
            let feilds = item.name;
            getCbInfo({feilds}).then(res=>{
                if(res.status){
                    let comInfo = res.data;
                    sessionStorage.setItem('comInfo',JSON.stringify(comInfo))
                    this.$router.push({ path: '/portray1/companyMessage'});
                }else if(res.code != '401' && !(res.status)){
                    this.$message({
                        message: `${res.msg}`,
                        type: 'warning'
                    });
                }
            })
        },
    }
}
</script>

<style scoped="scoped" lang="scss">
.main{
    width: 100%;
    background: url('../../../assets/sybj.jpg') no-repeat center;
    background-size: cover;
    min-height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
    .search{
        margin-top: 25vh;
        width: 954px;
        /deep/ .el-input-group__append, .el-input-group__prepend{
            background-color: #4285f4;
            color: #fff;
            border: none;
        }
        /deep/ .el-input-group__append, .el-input-group__prepend:hover{
            cursor: pointer;
        }
    }
    .history{
        margin-top: 40px;
        width: 954px;
        height: 22px;
        line-height: 22px;
        color: #fff;
        .title{
            display: inline-block;
            margin-left: 10px;
            margin-bottom: 16px;
            font-weight: 900;
        }
        .company{
            height: 40px;
            width: 300px;
            overflow:hidden;
	        text-overflow:ellipsis;
	        white-space:nowrap;
            line-height: 40px;
            margin: 0;
            padding: 0;
            &:hover{
                cursor: pointer;
            }
            .number{
                display: inline-block;
                margin-right: 10px;
            }
            .num1{
                color: #e46565;
            }
            .num2{
                color: #f17458;
            }
            .num3{
                color: #ebb848;
            }
        }
    }
}
</style>